<template>
  <div class="yinYangHole">
    <el-checkbox 
      style="margin: 0 0 15px 0;" 
      :indeterminate="isIndeterminateOne" 
      v-model="checkAllOne" 
      @change="handleCheckAllYin"
    >{{$t('page.negative')}}</el-checkbox>
    <el-checkbox-group v-model="checkedCitiesOne" @change="handleCitiesOne">
      <el-checkbox v-for="city in citiesOne" :label="city" :key="city" border>{{city}}</el-checkbox>
    </el-checkbox-group>
    <el-checkbox 
      style="margin: 0 0 15px 0;" 
      :indeterminate="isIndeterminateTwo" 
      v-model="checkAllTwo" 
      @change="handleCheckAllYang"
      >{{$t('page.positive')}}</el-checkbox>
    <el-checkbox-group v-model="checkedCitiesTwo" @change="handleCitiesTwo">
      <el-checkbox v-for="city in citiesTwo" :label="city" :key="city" border>{{city}}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>
<script>
export default {
  props: {
    cityOptions: {
      type: Array,
      default: () => []
    },
    yinYangHole: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    const list = this.cityOptions
    return {
      checkAllOne: false,
      isIndeterminateOne: false,
      checkedCitiesOne: [],
      citiesOne: list,
      
      checkAllTwo: false,
      checkedCitiesTwo: [],
      citiesTwo: list,
      isIndeterminateTwo: false,
    };
  },
  methods: {
    // 阴性操作
    handleCheckAllYin(val) {
      this.checkedCitiesOne = val ? this.citiesOne : [];
      this.isIndeterminateOne = false;

      this.handleEmit('yin')
    },
    handleCitiesOne() {
      this.handleEmit('yin')
    },

    // 阳性操作
    handleCheckAllYang(val) {
      this.checkedCitiesTwo = val ? this.citiesTwo : [];
      this.isIndeterminateOne = false;

      this.handleEmit('yang')
    },
    handleCitiesTwo() {
      this.handleEmit('yang')
    },

    // 向外抛出事件
    handleEmit(type = 'yin') {
      if(type === 'yin') {
        this.citiesTwo = this.cityOptions.filter(item => !this.checkedCitiesOne.includes(item))

      } else {
        this.citiesOne = this.cityOptions.filter(item => !this.checkedCitiesTwo.includes(item))
        
      }
      const checkedCountOne = this.checkedCitiesOne.length
      const checkedCountTwo = this.checkedCitiesTwo.length
      // 是否全选
      this.checkAllOne = checkedCountOne === this.citiesOne.length;
      this.checkAllTwo = checkedCountTwo === this.citiesTwo.length;

      // 是否为有选项
      this.isIndeterminateTwo = checkedCountTwo > 0 && checkedCountTwo < this.citiesTwo.length;
      this.isIndeterminateOne = checkedCountOne > 0 && checkedCountOne < this.citiesOne.length;

      this.$emit('update:yinYangHole', {
        negative_concent: this.checkedCitiesOne,
        positive_concent: this.checkedCitiesTwo
      })
    }
  },
}
</script>
<style lang="scss" scoped>
::v-deep {
  .el-checkbox.is-bordered {
    margin: 0 20px 10px 0 !important;
    box-sizing: border-box;
    padding: 10px 20px 10px 10px !important;
  }
}
.yinYangHole {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}
</style>
